<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      [v-cloak]{
        opacity:0
      }
    </style>
</head>
<body>
    <div id="app" v-cloak>

        <input type="checkbox" v-model='bol'>
        <h2 v-if='bol' key="1">哈哈哈哈<input type="text" placeholder="姓名"></h2>
        <h2 v-else key='2'>呵呵呵呵<input type="text" placeholder="年龄"></h2>
        <!-- key这个属性 对于vue来说 就是每一个元素的 一个身份证；vue为了自身编译的高效， 会选择元素复用 -->





        <div>-------------------------------------------------</div>
        <h1 v-show='bol'>{{name}}</h1>
        <template v-if='bol'>
          <h1 v-if='index > 2' v-for='(item,index) in ary' v-bind:key="index">{{item}}:{{name}}---{{index}}</h1>
          <!-- <h1>{{name}}</h1>
          <h1>{{name}}</h1>
          <h1>{{name}}</h1>
          <h1>{{name}}</h1>
          <h1>{{name}}</h1>
          <h1>{{name}}</h1> -->
        </template>
        <!-- <span></span> -->
        <h3 v-else-if='1 > 2'>elseif</h3>
        <h2 v-else>else</h2>
        <!-- <h1>{{name}}</h1>
        <h1 v-once>老值：{{name}}</h1>
        <h1 v-pre>老值：{{name}}</h1>
        <input type="text" v-model='name'>
        <h1 v-text='str'>这是静态文本</h1>
        <h1 v-html='str'></h1>

        <ul v-pre>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul> -->
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    /* 
      v-model='xxx'

      v-text='xxx'  为了解决 小胡子显示的问题  innerText
      v-html='xxx'                           innerHTML  这个指令的值 一定是一个可信任的内容

      v-cloak 这个指令 可以结合css去整个控制小胡子的显示问题; Vue执行完成之后 会把这个属性删除
      v-once 有这个指令的元素  它内部的所有的vue变量只会渲染一次
      v-pre  有这个指令的元素  vue在编译过程中 会直接跳过这个元素; 可以提升vue的编译效率

      v-show='xxx' 有这个指令的元素， xxx转成布尔若是true则 该元素display block;否则 该元素 display none
      v-if = 'xxx' 有这个指令的元素， xxx转成布尔若是true则 该元素加载，         否则 该元素不加载
          区别 v-show只是简单的控制了 css属性； v-if是让整个元素不加载；
          v-show有比较大的初始加载开销； v-if有比较大的切换开销

      v-for='(item,index) in xxx'   凡是有这个指令的元素 都会被玄幻展示 
          一般都是用来循环数组，但是也可以用来循环数字 对象 字符串
          v-for 的优先级 高于  v-if
          key 一 有时候 vue的 元素服用原则 可能会给我们造成bug
              二  能够提高 vue的DOM diff效率
              最好的key是数据对应的ID， index作为key 有没有碰见过问题？
              当作一些列表删除的时候 若是用索引作为key那么， 有可能会造成元素复用的bug

    */
    let vm = new Vue({
        el:'#app',
        data:{
            name:"珠峰",
            str:"<i>你好</i>",
            bol:true,
            ary:[111,222,333,444,555]
        }
    });
</script>